<!-- 热点追踪子组件 -->
<template>
  <a :href="href" class="infoItem">
    <img :src="img">
    <div class="word">
      <p class="title">{{title}}</p>
      <p class="detail">{{detail}}</p>
    </div>
  </a>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    href: {
      typeof: String,
      default: 'javascript:;'
    },
    img: {
      typeof: String,
      default: ''
    },
    title: {
      typeof: String,
      default: '万科天空之城 | 让城市竖起来'
    },
    detail: {
      typeof: String,
      default: '想象一下这样的生活一栋高楼就是一座竖起来的城市'
    }
  }
})
</script>

<style lang="less" scoped>
.infoItem {
  display: flex;
  padding: 24px 13px 23px 0;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #ededed;
  img {
    width: 160px;
    height: 120px;
    margin-right: 16px;
  }
  .word {
    width: 100%;
    margin-left: 16px;
    .title {
      // display: block;
      margin-bottom: 8px;
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 23px;
      color: #000000;
    }
    .detail {
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: #000000;
    }
  }
}
</style>
